<template>
  <a-card :bordered="false" :body-style="{ padding: '24px' }">
    <div class="flex flex-col gap-4">
      <div class="text-xl text-tc-1 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">
        {{ $props.data.title }}
      </div>
      <div class="flex items-center gap-2 text-tc-3">
        <guat-icon icon="ph:clock-fill" :size="16" />
        创建于: {{ $props.data.createTime }}
      </div>
      <div class="flex items-center gap-2 text-tc-3">
        <guat-icon icon="ph:tag-fill" :size="16" />
        {{ $props.data.tags.join("、") }}
      </div>
      <div class="flex items-center gap-2">
        <div class="text-tc-3">报名时间</div>
        {{ $props.data.applyTime[0] }} 至 {{ $props.data.applyTime[1] }}
      </div>
      <div class="flex items-center gap-2">
        <div class="text-tc-3">活动时间</div>
        {{ $props.data.activityTime[0] }} 至 {{ $props.data.activityTime[1] }}
      </div>
      <div class="flex items-center justify-between mt-2">
        <div class="flex gap-2">
          <a-tag size="large" :color="$props.data.isAllowLeave ? 'blue' : 'red'">
            {{ $props.data.isAllowLeave ? "允许请假" : "不允许请假" }}
          </a-tag>
          <a-tag size="large" color="blue"> {{ $props.data.people }}人 </a-tag>
          <a-tag size="large" :color="statusColor">
            {{ status }}
          </a-tag>
        </div>
        <a-popover position="tr" trigger="click" content-class="!py-2 !px-4">
          <a-button type="text">
            <guat-icon icon="ph:dots-three-outline-fill" />
          </a-button>
          <template #content>
            <guat-actions :actions />
          </template>
        </a-popover>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { Action } from "@/components/GuatActions/types";
import { RouteName } from "@/constant/route";

const props = defineProps<{
  data: {
    title: string;
    createTime: string;
    tags: string[];
    applyTime: string[];
    activityTime: string[];
    isAllowLeave: boolean;
    people: number;
    status: number;
  };
}>();

const router = useRouter();
const { info, warning } = useModalNotice();
const { success } = useMessage();

const actionConfig: Record<string, Action> = {
  post: {
    icon: "ph:paper-plane-tilt",
    color: "blue",
    onClick: handleOnPost,
  },
  check: {
    internal: "check",
    onClick: () => router.push({ name: RouteName.ACTIVITY_CHECK, params: { id: 1 } }),
  },
  edit: {
    internal: "edit",
    onClick: () => router.push({ name: RouteName.ACTIVITY_EDIT, params: { id: 1 } }),
  },
  delete: {
    internal: "delete",
    onClick: handleOnDelete,
  },
  stop: {
    icon: "ph:pause",
    color: "blue",
    onClick: handleOnStop,
  },
  continue: {
    icon: "ph:arrow-u-up-right",
    color: "blue",
    onClick: handleOnContinue,
  },
};

const statusColor = computed(() => {
  switch (props.data.status) {
    case 0:
      return "orange";
    case 1:
      return "purple";
    case 2:
      return "cyan";
    case 3:
      return "green";
    case 4:
      return "red";
  }
});
const status = computed(() => {
  switch (props.data.status) {
    case 0:
      return "未发布";
    case 1:
      return "未到报名时间";
    case 2:
      return "报名中";
    case 3:
      return "进行中";
    case 4:
      return "已暂停";
    case 5:
      return "已结束";
  }
});
const actions = computed<Action[]>(() => {
  const { post, check, edit, delete: del, stop, continue: ctn } = actionConfig;
  switch (props.data.status) {
    case 0:
      return [post, check, edit, del];
    case 1:
      return [check, edit, del];
    case 2:
    case 3:
      return [check, stop];
    case 4:
      return [ctn, check, edit, del];
    case 5:
      return [check, del];
    default:
      return [];
  }
});

function handleOnPost() {
  info({
    title: "发布确认",
    content: "请确认是否发布当前活动",
    onOk: () => success("活动发布成功"),
  });
}

function handleOnDelete() {
  warning({
    title: "删除确认",
    content: "请确认是否删除当前活动",
    onOk: () => success("活动删除成功"),
  });
}

function handleOnStop() {
  warning({
    title: "暂停确认",
    content: "请确认是否暂停当前活动",
    onOk: () => success("活动暂停成功"),
  });
}

function handleOnContinue() {
  info({
    title: "活动继续确认",
    content: "请确认是否继续当前活动",
    onOk: () => success("操作成功"),
  });
}
</script>

<style scoped></style>
